<!DOCTYPE html>
<html style="height: 100%">
<head>
    <script src="./js/jquery.js"></script>
    <script type="text/javascript" src="./js/echarts.min.js"></script>
    <meta charset="utf-8">
</head>
<body style="height: 100%;  margin: 0">
<table style="height: 100%;width:100%">
    <tr style="height:50%">
        <td style="width:50%">
            <div id="chart1" style="height: 100%;width:100%"></div>
        </td>
        <td>
            <div id="chart2" style="height: 100%;width:100%"></div>
        </td>
    </tr>
    <tr style="height:50%">
        <td colspan=2>
            <div id="chart3" style="height: 100%;width:100%"></div>
        </td>
    </tr>
</table>

<script type="text/javascript">
    {
        var dom = document.getElementById("chart1");
        var myChart = echarts.init(dom);
        var app = {};
        option = null;
        option = {
            title: {
                text: '高等植物种群'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            xAxis: {
                type: 'category',
                data: ['科目', '种类', '珍稀种类']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: [150, 1800, 20],
                type: 'bar',
                barWidth: '40%',
                itemStyle: {
                    //通常情况下：
                    normal: {
                        //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                        color: function (params) {
                            var colorList = ['rgb(164,205,238)', 'rgb(42,170,227)', 'rgb(25,46,94)'];
                            return colorList[params.dataIndex];
                        }
                    },
                    //鼠标悬停时：
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }]
        };
        if (option && typeof option === "object") {
            myChart.setOption(option, true);
        }
    }
    {
        var dom2 = document.getElementById("chart2");
        var myChart2 = echarts.init(dom2);
        var option2 = {
            title: {
                text: '野生动物种群',
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                top: 'middle',
                left: 'left',
                data: ['鸟类', '兽类', '两栖爬行类', '昆虫类']
            },
            series: [
                {
                    name: '野生动物',
                    type: 'pie',
                    radius: '50%',
                    center: ['50%', '40%'],
                    data: [
                        {value: 200, name: '鸟类'},
                        {value: 30, name: '兽类'},
                        {value: 40, name: '两栖爬行类'},
                        {value: 2000, name: '昆虫类'}
                    ],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        if (option2 && typeof option2 === "object") {
            myChart2.setOption(option2, true);
        }
    }
    {
        var dom3 = document.getElementById("chart3");
        var myChart3 = echarts.init(dom3);
        var option3 = {
            title: {
                text: '珍稀保护动植物',
                x: 'center'

            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            xAxis: {
                type: 'category',
                data: ['国家一级重点保护动物', '国家二级重点保护动物', '省重点保护动物', '国家一级重点保护植物', '国家二级重点保护植物']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: [5, 11, 27, 4, 16],
                type: 'bar',
                barWidth: '40%',
                itemStyle: {
                    //通常情况下：
                    normal: {
                        //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                        color: function (params) {
                            var colorList = ['rgb(164,205,138)', 'rgb(42,170,127)', 'rgb(25,46,194)', 'rgb(125,146,94)', 'rgb(176,60,204)'];
                            return colorList[params.dataIndex];
                        }
                    },
                    //鼠标悬停时：
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }]
        };
        if (option3 && typeof option3 === "object") {
            myChart3.setOption(option3, true);
        }
    }
</script>
</body>
</html>